<template>
	<view class="Menu">
		<!-- 导航条 :style="{ height: $wanlshop.wanlsys().height + 'px' }"-->
		<view class="cu-custom">
			<view class="cu-bar fixed" style="background: #fff;"
				:style="{height: $wanlshop.wanlsys().height + 'px',paddingTop: $wanlshop.wanlsys().top + 'px',}">
				<view class="action">
					<!-- <text class="wlIcon-fanhui1" style="margin-left: 0" @tap="$wanlshop.back(1)"></text> -->
				</view>
				<view class="content" :style="{ top: $wanlshop.wanlsys().top + 'px' }">
					行情
				</view>
				<view class="action">
					<text class="wlIcon-gengduo" @tap="showModal('share')"></text>
				</view>
			</view>
		</view>
		<view
			style="position: fixed;height: auto;  width: auto; top: 0; left: 0; bottom: 0; right: 0; background: #fff;"
			:style="{top: $wanlshop.wanlsys().height + 'px',}">
			<view class="table">
				<view class="tableT">
					<view class="tableTh">{{$t('otcquotation.table.head.name')}}<!-- 名称 --></view>
					<view class="tableTh">{{$t('otcquotation.table.head.new-price')}}<!-- 最新价 --></view>
					<view class="tableTh">{{$t('otcquotation.table.head.change')}}<!-- 24h涨跌幅 --></view>
				</view>
				<view v-for="(item, index) in tableData" :key="index" class="tableL">
					<view class="name">
						<image :src="item.logo" class="icon"></image>
						{{ item.name }}
					</view>
					<view>${{item.price}}</view>
					<view class="tate" :class="{'hot':parseFloat(item.chg) < 0,'gren':parseFloat(item.chg) > 0}">
						{{item.chg}}
					</view>
				</view>

			</view>
		</view>
	</view>
</template>
<script>
	import wanlshop_config from '@/common/config/config';
	export default {
		data() {
			return {
				windowHeight: 0,
				tableData: [],
			};
		},
		mounted() {
			// this.getPriceUsdt()
			this.sse()
		},
		methods: {
			//行情

			sse() {
				let that = this
				// 检查浏览器是否支持SSE
				if ("EventSource" in window) {
					// 创建EventSource对象并指定SSE服务器的路径
					var source = new EventSource(wanlshop_config.appurl + "/wanlshop/otc/market/getPriceUsdt");

					// 监听消息的传输
					source.onmessage = function(e) {
						// 对接收到的数据进行处理
						that.tableData = JSON.parse(e.data)
					};

					// 连接建立成功时触发
					source.onopen = function(e) {
						console.log("连接打开.");
					};

					// 连接发生错误时触发
					source.onerror = function(e) {
						if (e.readyState == EventSource.CLOSED) {
							console.log("连接关闭");
						} else {
							console.log("onerror:" + e.readyState);
						}
					};
				} else {
					console.log("浏览器不支持SSE");
				}
			},
		}
	};
</script>

<style lang="scss">
	.Menu {
		background: #fff;

		.table {
			margin: 0 24rpx;
			padding-bottom: 180rpx;
			height: 100vh;

			.tableT {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.tableTh {
					padding: 20rpx 0;
					width: 33.33%;
					font-size: 28rpx;
					color: #333333;
					line-height: 48rpx;
					text-align: center;
					background: #F8F8F8;
					font-weight: bold;
				}
			}

			.tableL {
				padding: 20rpx;
				font-size: 28rpx;
				color: #666666;
				display: flex;
				align-items: center;
				text-align: center;

				uni-view {
					width: 33.33%;
				}

				.name {
					.icon {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
						margin-top: -6rpx;
						vertical-align: middle;
					}
				}

				.tate {
					background: #999;
					border-radius: 4rpx;
					color: #fff;
					padding: 10rpx 15rpx;
				}

				.hot {
					background: #FC5351;
				}

				.gren {
					background: #19CB36;
				}


			}

			.tableL:nth-child(2n+1) {
				background: #f9f9f9;
			}
		}

	}
</style>